/** @jsxImportSource @emotion/react */
import * as React from "react";
import {BlobInputList, Text,} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, useItemInputControl} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";

const render报告编 = {
    view: (orc: any,rep: any) => {
        return <Text>{rep?.isp?.no}</Text>
    },
    // names: ['最小工作幅'],
};
export const config证书概要 = [
    [['使用单位', '_$使用单位'],],
    [['制造单位', '_$制造单位'],],
    [['产品名称', '_$设备名称'],],
    [['VIN码', '_$车架号'],],
    [['产品型号', '_$型号'], ['罐检报告编号','_$型号', render报告编] ],
    [['制造日期', '_$制造日期'], ['产品标准', '_$产品标准'] ],
    [['机动车号码', '_$上路号牌'], ['罐体编号', '_$出厂编号'],  ],
];


export const itemA发证=['适装介列'];
/**通用见证材料3项的： 约定：children [] 可以嵌入俩个儿子DOM节点，分别代表两个段落插入一个div块;
 * */
export const Certificate=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,title,}:InternalItemProps,  ref
    ) => {
        const itemA = React.useMemo(() => {
            return ['适装表', ...itemA发证];
        }, []);      //只会在组件首次挂载时运行
        const [getInpFilter] = useMeasureInpFilter(null, itemA,);
        const {inp, setInp} = useItemInputControl({ ref });
        let szslst = (inp?.适装表??[{}])?.reduce(function(prev:any, cur:any, index: number, arr: any[]) {
            return (prev? prev +'\n' :'') + cur?.n;
        },null);
        // (inp?.适装表??[{}])?.forEach((o: any, i:number) => { datalist?.push(o?.n); });
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text variant="h5">适装介质列表：</Text>
            <BlobInputList value={inp?.适装介列 ||''} rows={14}  datalist={[szslst]}
                           onListChange={v => setInp({ ...inp, 适装介列: v || undefined}) } />
        </InspectRecordLayout>;
    });
